<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<script setup>
import { markRaw } from 'vue';


import PIDControllerTemplate from "../views/PIDController/template.vue";
import Acc_ControlTemplate from "../views/Acc_Control/template.vue";
import GainScheduleTemplate from "../views/GainSchedule/template.vue";
import deadZone from "../views/deadZone/deadZone.vue";
import Integrator from "../views/Integrator/Integrator.vue";
import Filter_1st from "../views/Filter_1st/Filter_1st.vue";
import Filter_2nd from "../views/Filter_2nd/Filter_2nd.vue";
import From from "../views/From/From.vue";
import Goto from "../views/Goto/Goto.vue";
import TransferFcn from "../views/TransferFcn/TransferFcn.vue";
import SineWave from "../views/SineWave/SineWave.vue";
import RateLimiter from "../views/RateLimiter/RateLimiter.vue";
import Sign from "../views/Sign/Sign.vue";
import Demux from "../views/Demux/Demux.vue";
import Mux from "../views/Mux/Mux.vue";
import DllModel from "../views/DllModel/DllModel.vue";
import FMU_Model from "../views/FMU_Model/FMU_Model.vue";

import sumMain from "../views/sum/main.vue";
import sumProp from "../views/sum/attr.vue";
import StepMain from "../views/Step/main.vue";
import StepProp from "../views/Step/attr.vue";
import AbsMain from "../views/Abs/main.vue";
import AbsProp from "../views/Abs/attr.vue";
import MathMain from "../views/Math/main.vue";
import MathProp from "../views/Math/attr.vue";
import MinMaxMain from "../views/MinMax/main.vue";
import MinMaxProp from "../views/MinMax/attr.vue";
import SwitchMain from "../views/Switch/main.vue";
import SwitchProp from "../views/Switch/attr.vue";
import SaturationMain from "../views/Saturation/main.vue";
import SaturationProp from "../views/Saturation/attr.vue";
import RalationalOperatorMain from "../views/RalationalOperator/main.vue";
import RalationalOperatorProp from "../views/RalationalOperator/attr.vue";
import DelayMain from "../views/Delay/main.vue";
import DelayProp from "../views/Delay/attr.vue";
import productMain from "../views/product/main.vue";
import productProp from "../views/product/attr.vue";
import gainMain from "../views/gain/main.vue";
import gainProp from "../views/gain/prop.vue";
import gainSignalProp from "../views/gain/signalProp.vue";
import constantMain from "../views/constant/main.vue";
import constantProp from "../views/constant/prop.vue";
import PIDControllerMain from "../views/PIDController/main.vue";
import PIDControllerInitialization from "../views/PIDController/initialization.vue";
import PIDControllerSaturation from "../views/PIDController/saturation.vue";
import PIDControllerDataType from "../views/PIDController/dataType.vue";
import PIDControllerStatusAttr from "../views/PIDController/statusAttr.vue";
import Acc_ControlMain from "../views/Acc_Control/main.vue";
import Acc_ControlInitialization from "../views/Acc_Control/initialization.vue";
import Acc_ControlSaturation from "../views/Acc_Control/saturation.vue";
import Acc_ControlDataType from "../views/Acc_Control/dataType.vue";
import Acc_ControlStatusAttr from "../views/Acc_Control/statusAttr.vue";
import GainScheduleMain from "../views/GainSchedule/main.vue";
import GainScheduleInitialization from "../views/GainSchedule/initialization.vue";
import GainScheduleSaturation from "../views/GainSchedule/saturation.vue";
import GainScheduleStatusAttr from "../views/GainSchedule/statusAttr.vue";
import lookupMain from "../views/1-DLookup/main.vue";
import lookupAlgorithm from "../views/1-DLookup/algorithm.vue";
import lookupDataType from "../views/1-DLookup/dataType.vue";
import inMain from "../views/in/main.vue";
import inSignalProp from "../views/in/signalProp.vue";
import inExecute from "../views/in/execute.vue";
import outMain from "../views/out/main.vue";
import outSignalProp from "../views/out/signalProp.vue";
import outExecute from "../views/out/execute.vue";

const { propData } = defineProps(['propData'])
const activeName = defineModel()
const templates = {
    PID: markRaw(PIDControllerTemplate),
    Acc_Control: markRaw(Acc_ControlTemplate),
    GainSchedule: markRaw(GainScheduleTemplate),
    DeadZone: markRaw(deadZone),
    Integrator: markRaw(Integrator),
    Filter_1st: markRaw(Filter_1st),
    Filter_2nd: markRaw(Filter_2nd),
    From: markRaw(From),
    Goto: markRaw(Goto),
    TransferFcn: markRaw(TransferFcn),
    SineWave: markRaw(SineWave),
    RateLimiter: markRaw(RateLimiter),
    Sign: markRaw(Sign),
    Demux: markRaw(Demux),
    Mux: markRaw(Mux),
    DllModel: markRaw(DllModel),
    FMU_Model: markRaw(FMU_Model),
}
const pages = {
    Sum: [
        {
            name: '主要',
            component: markRaw(sumMain)
        },
        // {
        //     name: '信号属性',
        //     component: markRaw(sumProp)
        // }
    ],
    Product: [
        {
            name: '主要',
            component: markRaw(productMain)
        },
        // {
        //     name: '信号属性',
        //     component: markRaw(productProp)
        // }
    ],
    Gain: [
        {
            name: '主要',
            component: markRaw(gainMain)
        },
        // {
        //     name: '信号属性',
        //     component: markRaw(gainProp)
        // },
        // {
        //     name: '参数属性',
        //     component: markRaw(gainSignalProp)
        // }
    ],
    Constant: [
        {
            name: '主要',
            component: markRaw(constantMain)
        },
        // {
        //     name: '信号属性',
        //     component: markRaw(constantProp)
        // },
    ],
    PID: [
        {
            name: '主要',
            component: markRaw(PIDControllerMain)
        },
        {
            name: '初始化',
            component: markRaw(PIDControllerInitialization)
        },
        {
            name: '饱和',
            component: markRaw(PIDControllerSaturation)
        },
        // {
        //     name: '数据类型',
        //     component: markRaw(PIDControllerDataType)
        // },
        // {
        //     name: '状态属性',
        //     component: markRaw(PIDControllerStatusAttr)
        // },
    ],
    Acc_Control: [
        {
            name: '主要',
            component: markRaw(Acc_ControlMain)
        },
        // {
        //     name: '初始化',
        //     component: markRaw(Acc_ControlInitialization)
        // },
        // {
        //     name: '饱和',
        //     component: markRaw(Acc_ControlSaturation)
        // },
        // {
        //     name: '数据类型',
        //     component: markRaw(Acc_ControlDataType)
        // },
        // {
        //     name: '状态属性',
        //     component: markRaw(Acc_ControlStatusAttr)
        // },
    ],
    GainSchedule: [
        {
            name: '主要',
            component: markRaw(GainScheduleMain)
        },
        {
            name: '初始化',
            component: markRaw(GainScheduleInitialization)
        },
        {
            name: '饱和',
            component: markRaw(GainScheduleSaturation)
        },
        // {
        //     name: '状态属性',
        //     component: markRaw(GainScheduleStatusAttr)
        // },
    ],
    Lookup_1D: [
        {
            name: '表和断点',
            component: markRaw(lookupMain)
        },
        // {
        //     name: '算法',
        //     component: markRaw(lookupAlgorithm)
        // },
        // {
        //     name: '数据类型',
        //     component: markRaw(lookupDataType)
        // },
    ],
    In: [
        {
            name: '主要',
            component: markRaw(inMain)
        },
        // {
        //     name: '信号属性',
        //     component: markRaw(inSignalProp)
        // },
        // {
        //     name: '执行',
        //     component: markRaw(inExecute)
        // },
    ],
    Out: [
        {
            name: '主要',
            component: markRaw(outMain)
        },
        // {
        //     name: '信号属性',
        //     component: markRaw(outSignalProp)
        // },
        // {
        //     name: '执行',
        //     component: markRaw(outExecute)
        // },
    ],
    Step: [
        {
            name: '主要',
            component: markRaw(StepMain)
        },
        // {
        //     name: '信号属性',
        //     component: markRaw(StepProp)
        // }
    ],
    Abs: [
        {
            name: '主要',
            component: markRaw(AbsMain)
        },
        // {
        //     name: '信号属性',
        //     component: markRaw(AbsProp)
        // }
    ],
    Delay: [
        {
            name: '主要',
            component: markRaw(DelayMain)
        },
        // {
        //     name: '状态属性',
        //     component: markRaw(DelayProp)
        // }
    ],
    Math: [
        {
            name: '主要',
            component: markRaw(MathMain)
        },
        // {
        //     name: '信号属性',
        //     component: markRaw(MathProp)
        // }
    ],
    MinMax: [
        {
            name: '主要',
            component: markRaw(MinMaxMain)
        },
        // {
        //     name: '信号属性',
        //     component: markRaw(MinMaxProp)
        // }
    ],
    RelationalOperator: [
        // RalationalOperator: [
        {
            name: '主要',
            component: markRaw(RalationalOperatorMain)
        },
        // {
        //     name: '数据类型',
        //     component: markRaw(RalationalOperatorProp)
        // }
    ],
    Saturation: [
        {
            name: '主要',
            component: markRaw(SaturationMain)
        },
        // {
        //     name: '信号属性',
        //     component: markRaw(SaturationProp)
        // }
    ],
    Switch: [
        {
            name: '主要',
            component: markRaw(SwitchMain)
        },
        // {
        //     name: '信号属性',
        //     component: markRaw(SwitchProp)
        // }
    ],
}
</script>

<template>
    <!-- {{ propData.data }} -->
    <template v-if="templates[propData.illustrate.type]">
        <component :is="templates[propData.illustrate.type]" :data="propData.data" :illustrate="propData.illustrate"
            v-bind="propData.config && { config: propData.config }" />
    </template>
    <template v-if="pages[propData.illustrate.type]">
        <el-tabs v-model="activeName" type="border-card" class="tabs">
            <template v-for="im, ix in pages[propData.illustrate.type]" :key="ix">
                <el-tab-pane :label="im.name" :name="ix">
                    <component :is="im.component" :data="propData.data"
                        v-bind="propData.config && { config: propData.config }" />
                    <!-- <component :is="im.component" :data="im.data" /> -->
                </el-tab-pane>
            </template>
        </el-tabs>
    </template>
</template>

<style scoped>
.tabs {
    /* height: 200px; */
    --el-tabs-header-height: 30px;
    border: 0;

    &>>>.el-tabs__header {
        background-color: initial;
    }

    &>>>.el-tabs__nav.is-top {
        transform: translateX(1px) !important;
    }

    &>>>.el-tabs__item.is-top {
        padding: 0 15px;
    }

    &>>>.el-tabs__item.is-top:not(.is-active) {
        background-color: #F0F0F060;
        transform: translateY(3px);
    }

    &>>>.el-tabs__item.is-top.is-active {
        border-top-color: var(--el-border-color);
        transform: translateY(1px);
    }

    &>>>.el-tabs__content {
        padding: 12px 10px;
    }

    &>>>.el-checkbox {
        margin-right: 6px;
    }

    position: relative;

    &::before {
        content: '';
        position: absolute;
        border: solid var(--el-border-color);
        border-width: 0 1px 1px;
        inset: 28px 0 0 0;
        height: calc(100% - 28px);
    }
}
</style>
<style>
.topForm {
    .el-form-item {
        width: calc(50% - 5px);
        margin-right: 10px;

        &+.el-form-item {
            margin-right: 0;
        }
    }
}

.el-form-item {
    width: 100%;
    margin-bottom: 8px;

    &[inline]>.el-form-item__content {
        flex-wrap: nowrap;

        & .el-select,
        & .el-input {
            margin-right: 8px;
        }
    }
}

.el-form.el-form--inline {
    display: flex;

    & .el-form-item {
        margin-right: 0;

        &+.el-form-item {
            margin-left: 8px;
        }
    }
}

.el-form:not(.el-form--inline) {
    & .el-form-item:last-child {
        margin-bottom: 0;
    }

    &+.el-form {
        margin-top: 8px;
    }
}

.gapDescriptions {

    & th+th,
    & td+td {
        padding-left: 6px;
    }
}

.el-descriptions--small .el-descriptions__body .el-descriptions__table .el-descriptions__cell {
    padding-bottom: 3px !important;
}

.spanA {
    text-decoration: underline;
    color: #0000ff;
    cursor: pointer;
}
</style>